<template>
  <div class="ele-body ele-body-ex ele-body-layout">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>关键词分析(默认显示今天数据)</span>
      </div>

      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="url"
        :highlight-current-row="true"
        :max-height="defaultHeight"
        :parse-data="parseData"
        :selection.sync="selection"
        :summary-method="summaries"
        :where="where"
        show-summary
      >
        <!-- 推广行业列 -->
        <template slot="bazaarId" slot-scope="{ row }">
          <template v-for="item in BazaarList">
            <span v-if="row.bazaarId === item.id" :key="item.id">
              {{ item.name }}
            </span>
          </template>
        </template>

        <!-- 操作列 -->
        <template slot="action" slot-scope="{ row }">
          <el-link
            :underline="false"
            icon="el-icon-s-grid"
            type="primary"
            @click="semanalyse(row)"
            >URL数据查看
          </el-link>
        </template>

        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-form
            :model="where"
            class="ele-form-search"
            label-width="75px"
            @keyup.enter.native="reload"
            @submit.native.prevent
          >
            <div class="app-container">
              <div class="filter-container">
                <el-select
                  v-model="where.bazaarId"
                  class="filter-item"
                  clearable
                  placeholder="推广行业"
                  style="width: 200px"
                  @change="reload"
                >
                  <el-option
                    v-for="item in BazaarList"
                    :key="item.id"
                    :disabled="item.status === 0"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>

                <el-input
                  v-model="where.keywords"
                  class="filter-item"
                  clearable
                  placeholder="关键词"
                  style="width: 220px"
                  @clear="reload"
                />

                <el-date-picker
                  v-model="daterange"
                  :clearable="false"
                  :picker-options="pickerOptions"
                  end-placeholder="数据结束日期"
                  range-separator="-"
                  start-placeholder="数据开始日期"
                  style="width: 230px; margin-right: 6px"
                  type="datetimerange"
                  unlink-panels
                  value-format="yyyy-MM-dd HH:mm:ss"
                  @change="onDateRangeChoose"
                />

                <el-button
                  class="filter-item"
                  icon="el-icon-search"
                  type="primary"
                  @click="reload"
                  >搜索
                </el-button>
                <el-button
                  class="filter-item"
                  icon="el-icon-refresh"
                  style="margin-left: 2px"
                  @click="reset"
                  >重置
                </el-button>
              </div>
            </div>
          </el-form>
        </template>
      </ele-pro-table>
    </el-card>

    <el-dialog :title="this.SemdialogTitle" :visible.sync="SemdialogVisible">
      <el-table :data="this.Semanalyse" :max-height="500">
        <el-table-column label="编号" type="index" width="50"></el-table-column>
        <el-table-column label="所属行业" property="bazaarId" width="90">
          <template slot-scope="scope">
            <template v-for="item in BazaarList">
              <span v-if="scope.row.bazaarId === item.id" :key="item.id">
                {{ item.name }}
              </span>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="笔记类别" property="type" width="70">
          <template slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.type == 1">广告</el-tag>
            <el-tag type="success" v-else size="mini">赞助</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="所属公司" property="company"></el-table-column>
        <el-table-column label="笔记标题" property="title"></el-table-column>
        <el-table-column
          label="评论数"
          property="comments"
          width="68"
        ></el-table-column>
        <el-table-column
          label="点赞数"
          property="love"
          width="68"
        ></el-table-column>
        <el-table-column
          label="收藏数"
          property="star"
          width="68"
        ></el-table-column>
        <el-table-column
          label="展示顺序"
          property="showpos"
          width="68"
        ></el-table-column>
        <el-table-column
          label="展示次数"
          property="number"
          width="68"
        ></el-table-column>
        <el-table-column label="URL" property="url" width="90">
          <template slot-scope="scope">
            <el-link :href="scope.row.url" target="_blank" type="primary"
              ><i class="el-icon-_globe"></i> 访问URL</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="SemdialogVisible = false"
          >明 白</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "xhsAnalysis",
  data() {
    return {
      //数据合计
      total: Object,
      //市场列表
      BazaarList: [],
      // 表格高度
      defaultHeight: 0,
      // 表格数据接口
      url: "/Xhsanalysis/read",
      // SEM分析
      Semanalyse: Object,
      // 打开SEM分析
      SemdialogVisible: false,
      // SEM分析标题
      SemdialogTitle: "URL数据分析",
      // 筛选日期范围
      daterange: this.getDaterange(),
      // 日期时间选择器快捷项
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime());
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime() + 24 * 60 * 60 * 1000);
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 24 * 60 * 60 * 1000);
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 7 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近半月",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 15 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 30 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 90 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近半年",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 180 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一年",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 365 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 表格列配置
      columns: [
        {
          columnKey: "index",
          type: "index",
          width: 80,
          label: "序号",
          align: "center",
          showOverflowTooltip: true,
        },
        {
          prop: "bazaarId",
          slot: "bazaarId",
          label: "所属行业",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "keywords",
          label: "关键词",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "advertisingNumber",
          label: "广告数",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "sponsorNumber",
          label: "赞助数",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "urlNumber",
          label: "URL数",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "countNumber",
          label: "推广合计",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          columnKey: "action",
          label: "URL分析",
          resizable: false,
          slot: "action",
        },
      ],
      // 表格搜索条件
      where: {},
      // 是否显示编辑弹窗
      showEdit: false,
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
    };
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },

  methods: {
    semanalyse(obj) {
      this.SemdialogTitle =
        "关键词【" + obj.keywords + "】URL数据分析 - " + this.daterange;
      this.$http
        .post("/Xhsanalysis/getData", Object.assign({}, obj, this.where))
        .then((res) => {
          if (res.data.code === 0) {
            this.Semanalyse = res.data.data;
            this.SemdialogVisible = true;
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },

    summaries(param) {
      const { columns, data } = param,
        createDiv = function (t1, t2) {
          return (() => {
            return (
              <el-col>
                <el-col class="el-table_target_sum">{t1}</el-col>
                <el-col class="el-table_target_bar"></el-col>
                <el-col class="el-table_target_total">{t2}</el-col>
              </el-col>
            );
          })();
        };
      let result = [],
        sum1 = 0,
        sum2 = 0,
        sum3 = 0,
        sum4 = 0;
      columns.forEach((column, index) => {
        switch (column.property) {
          case "keywords":
            result[index] = createDiv("小计", "合计");
            break;

          case "sponsorNumber":
            sum1 = this.getcolumn(data, column.property, true);
            result[index] = createDiv(sum1, this.total.sponsorNumber);
            break;

          case "advertisingNumber":
            sum2 = this.getcolumn(data, column.property, true);
            result[index] = createDiv(sum2, this.total.advertisingNumber);
            break;

          case "urlNumber":
            sum3 = this.getcolumn(data, column.property, true);
            result[index] = createDiv(sum3, this.total.urlNumber);
            break;

          case "countNumber":
            sum4 = this.getcolumn(data, column.property, true);
            result[index] = createDiv(sum4, this.total.countNumber);
            break;
        }
      });
      return result;
    },

    getcolumn(data, column, integer) {
      if (data.length === 0) {
        return 0;
      }
      let sums = 0;
      const values = data.map((item) => Number(item[column]));
      if (!values.every((value) => isNaN(value))) {
        sums = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
      }
      if (integer) {
        return sums;
      }
      return sums.toFixed(2);
    },

    /*设置表格高度*/
    getHeight() {
      this.defaultHeight = window.innerHeight - 360;
    },

    /*表格数据加载*/
    parseData(res) {
      if (res.code === 0) {
        this.BazaarList = res.bazaar;
        this.total = res.total;
      }
      return {
        code: res.code,
        data: res.data,
        count: res.count,
        msg: res.msg,
      };
    },

    /* 刷新表格 */
    reload(isPage) {
      let obj = { where: this.where };
      if (!isPage) {
        obj.page = 1;
      }
      this.$refs.table.reload(obj);
    },

    /* 重置搜索 */
    reset() {
      for (let key in this.where) {
        this.where[key] = null;
      }
      this.reload();
    },

    getDaterange() {
      let start = new Date();
      start.setTime(start.getTime());
      start =
        start.getFullYear() +
        "-" +
        (start.getMonth() + 1) +
        "-" +
        start.getDate() +
        " 00:00:00";
      let end = new Date();
      end.setTime(end.getTime() + 24 * 60 * 60 * 1000);
      end =
        end.getFullYear() +
        "-" +
        (end.getMonth() + 1) +
        "-" +
        end.getDate() +
        " 00:00:00";
      return [start, end];
    },

    /* 日期选择改变回调 */
    onDateRangeChoose() {
      if (this.daterange && this.daterange.length === 2) {
        this.where.createTimeStart = this.daterange[0];
        this.where.createTimeEnd = this.daterange[1];
      } else {
        this.where.createTimeStart = null;
        this.where.createTimeEnd = null;
      }
    },
  },
};
</script>

<style scoped>
.ele-table-tool .is-disabled {
  cursor: not-allowed;
  filter: Alpha(opacity=0.65);
  -moz-opacity: 0.65;
  opacity: 0.65;
}
</style>
